import {
  FlatList,
  ListRenderItem,
  RefreshControl,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Banner from '../../../widget/Banner.tsx';
import {useEffect, useState} from 'react';
import service, {getRequest} from '../../../api';
import {Icon} from '@rneui/themed';
import {Colors} from '../../../utils/Colors.ts';
import {Article, ArticleResponse} from '../../../model/ArticleResponse.ts';

let currentPage = 0;

export function Home() {
  const [banner, setBanner] = useState([]);
  const [article, setArticle] = useState<any[]>([]);
  const [articleRefresh, setArticleRefresh] = useState(false);

  const getArticle = (pageIndex: number) => {
    getRequest<ArticleResponse>(`article/list/${pageIndex}/json`).then(
      articleRes => {
        if (pageIndex == 0) {
          setArticle([]);
        }
        const newArticle = [...article, ...articleRes.datas];
        setArticleRefresh(false);
        setArticle(newArticle);
      },
    );
  };

  useEffect(() => {

  }, []);

  useEffect(() => {
    getArticle(currentPage);
  }, []);

  const renderItem = (item: ListRenderItem<Article>) => {
    let article: Article = item.item;
    return (
      <TouchableOpacity onPress={() => {}} style={styleSheet.item}>
        <View style={{flex: 1}}>
          <Text>{article.title}</Text>
          <View
            style={{
              justifyContent: 'space-between',
              flexDirection: 'row',
              alignItems: 'baseline',
            }}>
            <Text style={styleSheet.itemChapter}>{article.chapterName}</Text>
            <Text>{article.niceDate}</Text>
          </View>
        </View>
        <Icon
          name="favorite"
          style={{padding: 2, width: 32, height: 32, marginStart: 8}}
        />
      </TouchableOpacity>
    );
  };

  const onLoadMore = () => {
    currentPage = currentPage + 1;
    getArticle(currentPage);
  };

  const refresh = () => {
    currentPage = 0;
    setArticleRefresh(true);
    getArticle(currentPage);
  };

  return (
    <View style={{flex: 1}}>
      <FlatList
        showsVerticalScrollIndicator={false}
        data={article}
        renderItem={renderItem}
        style={styleSheet.list}
        refreshControl={
          <RefreshControl refreshing={articleRefresh} onRefresh={refresh} />
        }
        onEndReached={onLoadMore}
        onEndReachedThreshold={0.1}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

const styleSheet = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },

  banner: {
    backgroundColor: 'red',
  },

  list: {},

  item: {
    borderRadius: 8,
    marginHorizontal: 16,
    marginTop: 12,
    backgroundColor: Colors.white,
    padding: 12,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },

  itemChapter: {
    borderColor: Colors.colorPrimary,
    color: Colors.colorPrimary,
    borderRadius: 8,
    borderWidth: 1,
    paddingHorizontal: 4,
    paddingVertical: 2,
    marginTop: 8,
  },
});
